<template>
    <div class="page-content-wrap">
        <page-title></page-title>
        <div class="page-content">
            <div class="page-flex-row">
                <div class="box-left">
                    <dept-tree
                        @node-click="nodeClick" 
                        @updateCurrentNode="updateCurrentNode"
                        @updatePath="updatePathFun">
                    </dept-tree>
                </div>
                <div class="box-right">
                    <!-- <page-title fix-tab>
                        <div class="Breadcrumb" slot="title">
                            <el-breadcrumb separator="/">
                                <el-breadcrumb-item v-for="item of path" :key="item.id">{{ item.name }}</el-breadcrumb-item>
                            </el-breadcrumb>
                        </div>
                    </page-title> -->
                    <el-tabs v-model="activeTab" type="border-card" class="flex-tabs">
                        <el-tab-pane label="部门信息" name="1">
                            <el-form label-width="170px" ref="form1" label-suffix="：">
                                <el-form-item label="部门名称">
                                    <p>{{ ruleForm.name }}</p>
                                </el-form-item>
                                <el-form-item label="部门主管">
                                    <p>{{ ruleForm.chargUserNames }}</p>
                                </el-form-item>
                                <el-form-item label="部门职责">
                                    <p>{{ ruleForm.descr }}</p>
                                </el-form-item>
                                <el-form-item label="部门编号">
                                    <p>{{ ruleForm.code }}</p>
                                </el-form-item>
                                <el-form-item label="部门类型">
                                    <p>{{ ruleForm.deptTypeName }}</p>
                                </el-form-item>
                                <el-form-item label="办公地址">
                                    <p>{{ ruleForm.regAddress }}</p>
                                </el-form-item>
                                <el-form-item label="办公电话">
                                    <p>{{ ruleForm.telPhone }}</p>
                                </el-form-item>
                                <el-form-item label="邮件">
                                    <p>{{ ruleForm.email }}</p>
                                </el-form-item>
                                <el-form-item label="隐藏本部门">
                                    <el-switch v-model="ruleForm.isHidden" :active-value="1" :inactive-value="0" disabled></el-switch>
                                    <div class="tips">开启后，无法从通讯录中看到该号码</div>
                                </el-form-item>
                                <el-form-item label="部门员工仅可见自己">
                                    <el-switch v-model="ruleForm.isUserShow" :active-value="1" :inactive-value="0" disabled></el-switch>
                                    <div class="tips">开启后，本部门员工默认只能看到自己；使用场景如：供应商之间相互不可见，不可见企业通讯录，但可见指定的人员</div>
                                </el-form-item>
                            </el-form>
                        </el-tab-pane>
                        <!-- <el-tab-pane label="群组" name="2">
                            <div class="tab-title">
                                <span v-if="!groupForm.id">还未为该部门创建消息群组，如需创建群组，请点击群组的创建功能</span>&nbsp;
                                <div class="tab-btn" v-if="!loading">
                                    <el-button class="pd9" icon="el-icon-circle-plus" circle type="text" @click="newGroup" v-if="!groupForm.id"></el-button>
                                    <el-button class="pd9" icon="el-icon-edit" circle type="text" @click="editGroup" v-if="groupForm.id"></el-button>
                                </div>
                            </div>
                            <el-form :model="groupForm" ref="form2" label-width="150px" label-suffix="：">
                                <el-form-item label="群组名称" prop="name">
                                    <p>{{ groupForm.name }}</p>
                                </el-form-item>
                                <el-form-item label="负责人" prop="dutyName">
                                    <p>{{ groupForm.dutyName }}</p>
                                </el-form-item>
                                <el-form-item label="群组人数" prop="usercnt">
                                    <p>{{ groupForm.usercnt }} 人</p>
                                </el-form-item>
                                <el-form-item label="可见范围" prop="scopeName">
                                    <p>{{ groupForm.scopeName }}</p>
                                </el-form-item>
                                <el-form-item label="群主题" prop="theme">
                                    <el-input v-model="groupForm.theme" type="textarea" :rows="4" disabled></el-input>
                                </el-form-item>
                                <el-form-item label="包含子部门员工" prop="isHaveSub">
                                    <el-switch v-model="groupForm.isHaveSub" :active-value="1" :inactive-value="0" disabled></el-switch>
                                    <div class="tips">开启后，本部门下的部门员工将被加入到该部门群</div>
                                </el-form-item>
                            </el-form>
                            <org-group ref="group" :deptId="deptTreeInfo.id" @refresh="queryDeptGroup"></org-group>
                        </el-tab-pane> -->
                        <el-tab-pane label="管理员" name="3">
                            <div class="page-flex-column">
                                <div class="tips">
                                    部门管理员负责该部门及下级部门员工的权限管理，当员工申请权限时依次由本部门、上级部门；所有部门及上级部门没有管理员权限时，由超级管理员处理。
                                </div>
                                <div class="search-box">
                                    <div class="btn-wrap">
                                        <el-button icon="el-icon-circle-plus" type="success" @click="addManageFun">添加管理员</el-button>
                                    </div>
                                </div>
                                <div class="table-box">
                                    <el-table 
                                        v-loading="loading"
                                        :data="tableData"
                                        height="100%">
                                        <el-table-column label="姓名" prop="username" width="180">
                                            <template slot-scope="scope">
                                                <img-show :name="scope.row.username" :url="scope.row.imsUrl"></img-show>
                                            </template>
                                        </el-table-column>
                                        <el-table-column label="工号" prop="employeeNo" min-width="120"></el-table-column>
                                        <el-table-column label="邮箱" prop="email" min-width="120" align="left"></el-table-column>
                                        <el-table-column label="手机号" prop="mobile" min-width="120"></el-table-column>
                                        <el-table-column label="状态" prop="userStatusName" width="120"></el-table-column>
                                        <el-table-column label="操作" fixed="right" width="100">
                                            <template slot-scope="scope">
                                                <el-button type="text" @click="removeManage(scope.row)">移除</el-button>
                                            </template>
                                        </el-table-column>
                                    </el-table>
                                </div>
                            </div>
                            <select-user-dialog ref="manage" :visible.sync="show" :data="tableData" @update="saveManageToDept"></select-user-dialog>
                        </el-tab-pane>
                        <!-- <el-tab-pane label="应用" name="4">
                            <div class="app-wrap">
                                <ul>
                                    <li v-for="(item, index) in options" :key="index" class="app-item">
                                        <div class="info-item">
                                            <div class="int-text">
                                                <img-show :url="item.logo" :name="item.name" :subname="item.descr"></img-show>
                                            </div>
                                            <div class="status">
                                                {{ item.statusName }}
                                            </div>
                                        </div>
                                    </li>
                                </ul>
                            </div>
                        </el-tab-pane> -->
                    </el-tabs>
                </div>
            </div>
        </div>
    </div>
</template>
<script>
    import { getDeptInfo, queryGroup, getDeptDutyUser, deleteDeptDutyUser, moduleQueryAll, addDeptDutyUser } from "./service.js";
    import LeftRightLayout from '@/components/layout/LeftRightLayout';
    import deptTree from './child/deptTree';
    import orgGroup from './child/orgGroup';
    import selectUserDialog from '@/components/selectDialog/selectUserDialog';
    import imgShow from '@/components/avator/imgShow';
    export default {
        name: 'deptConf', // 组织机构
        components: {
            LeftRightLayout,
            deptTree,
            orgGroup,
            selectUserDialog,
            imgShow
        },
        data() {
            return {
                show: false,
                activeTab: '1',
                deptTreeInfo: {},
                path: [],
                tableData: [],
                options: [],
                ruleForm: {
                    name: '',
                    chargUserNames: '',
                    descr: '',
                    code: '',
                    deptTypeName: '',
                    regAddress: '',
                    email: '',
                    telPhone: '',
                    isHidden: 0,
                    isUserShow: 0,
                },
                groupForm: {
                    name: '',
                    dutyId: '',
                    dutyName: '',
                    usercnt: '', // 群组人数
                    scopeCode: '',
                    scopeName: '',
                    theme: '',
                    isHaveSub: 0,
                },
                loading: false,
                loading2: false,
            };
        },
        computed: {},
        methods: {
            nodeClick(treeNode) { // 节点点击事件
                this.deptTreeInfo = treeNode;
                this.queryDeptInfo();
                // this.queryDeptGroup();
                this.getDeptDutyUserFun();
                this.queryModules();
            },
            queryDeptInfo() {
                let params = {
                    id: this.deptTreeInfo.id
                }
                getDeptInfo(params).then(res => {
                    if(res.data.code == 1000) {
                        let data = res.data.data;
                        if(data) {
                            this.ruleForm.name = data.name;
                            this.ruleForm.chargUserNames = data.chargUserNames;
                            this.ruleForm.descr = data.descr;
                            this.ruleForm.code = data.code;
                            this.ruleForm.deptTypeName = data.deptTypeName;
                            this.ruleForm.regAddress = data.regAddress;
                            this.ruleForm.email = data.email;
                            this.ruleForm.telPhone = data.telPhone;
                            this.ruleForm.isHidden = data.isHidden;
                            this.ruleForm.isUserShow = data.isUserShow;
                        }
                    }
                })
            },
            updateCurrentNode(node) { // 更新当前选中的节点
                this.deptTreeInfo = node;
                this.queryDeptInfo();
            },
            updatePathFun(path) { // 更新面包屑导航
                this.path = path;
            },
            queryDeptGroup() { // 查询机构下的群组
                let params = {
                    busiId: this.deptTreeInfo.id
                }
                this.loading = true;
                queryGroup(params).then(res => {
                    if(res.data.code == 1000) {
                        let data = res.data.data;
                        if(Array.isArray(data) && data.length) {
                            let _data = data[0];
                            this.groupForm.id = _data.id;
                            this.groupForm.name = _data.name;
                            this.groupForm.dutyId = _data.dutyId;
                            this.groupForm.dutyName = _data.dutyName;
                            this.groupForm.usercnt = _data.usercnt; // 群组人数
                            this.groupForm.scopeCode = _data.scopeCode;
                            this.groupForm.scopeName = _data.scopeName;
                            this.groupForm.theme = _data.theme;
                            this.groupForm.isHaveSub = _data.isHaveSub;
                        }else {
                            this.groupForm.id = '';
                            this.$refs.form2.resetFields();
                        }
                    }
                    this.loading = false;
                }).catch(error => {
                    this.loading = false;
                })
            },
            newGroup() {
                this.$refs.group.showLayout();
            },
            editGroup() {
                this.$refs.group.showEdit({id: this.groupForm.id});
            },
            getDeptDutyUserFun() { // 查询机构下的管理员
                let params = {
                    id: this.deptTreeInfo.id,
                    typeCode: 'BMQ',
                }
                this.loading2 = true;
                getDeptDutyUser(params).then(res => {
                    if(res.data.code == 1000) {
                        let data = res.data.data;
                        if(Array.isArray(data)) {
                            this.tableData = [...data];
                        }else {
                            this.tableData = [];
                        }
                    }
                    this.loading2 = false;
                }).catch(error => {
                    this.loading2 = false;
                })
            },
            addManageFun() {
                this.show = true;
            },
            saveManageToDept(list) {
                if(list.length) {
                    let params = {
                        id: this.deptTreeInfo.id,
                        dutyUserIds: list.map(item => item.id).join(),
                        dutyUserNames: list.map(item => item.username).join()
                    }
                    addDeptDutyUser(params).then(res => {
                        if(res.data.code == 1000) {
                            this.$notify({
                                title: '提示',
                                type: 'success',
                                message: '添加成功！'
                            })
                            this.getDeptDutyUserFun();
                        }
                    }).catch(error => {})
                }
            },
            removeManage(row) { // 移除管理员
                this.$confirm('确认移除该管理员？', {title: '提示', type: 'warning'}).then(() => {
                    let params = {
                        id: this.deptTreeInfo.id,
                        dutyUserIds: row.id
                    }
                    deleteDeptDutyUser(params).then(res => {
                        if(res.data.code == 1000) {
                            this.$notify({
                                title: '提示',
                                type: 'success',
                                message: '移除成功！'
                            })
                            this.getDeptDutyUserFun();
                        }
                    })
                }).catch(() => {})
            },
            queryModules() { // 查询应用
                let params = {
                    scopeDeptId: this.deptTreeInfo.id,
                    typeCode: 'APPLICATION'
                }
                moduleQueryAll(params).then(res => {
                    if(res.data.code == 1000) {
                        let data = res.data.data;
                        if(Array.isArray(data)) {
                            this.options = [...data];
                        }else {
                            this.options = [];
                        }
                    }
                })
            },
        }
    };

</script>
<style lang="scss" scoped>
    .page-content-wrap {

        .page-content {
            padding: 0 10px 10px;
            .box-right {
                padding: 0;
            }
        }
    }

</style>
